<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html{
				font-size: 15px;
			}
			body{
				display: flex;
				justify-content: center;/* 水平居中 */
				align-items: center;/* 垂直居中,需要给高度 */
				min-height: 100vh;
				flex-direction: column;
			}
			h1{
				font-size: 6rem;
			}
			span{
				display: inline-block;
				animation-name:blink;
				/*取出style中的--delay属性值*/
				animation-delay: var(--delay);
				animation-timing-function: ease-in-out;
				animation-duration: 2s;
				animation-iteration-count: infinite;
			}
			@keyframes blink{
				0%, 100%{
					color: inherit;
				}
				50%{
					color: #B9E769;
				}
			}
		</style>
	</head>
	<body>
		<h1>SADON_ jung</h1> 
	</body>
	<script>
		const h1 = document.querySelector('h1')
			 //为每个字母套上span标签
			 h1.innerHTML = h1.textContent.replace(/\S/g,"<span>$&</span>")
			 document.querySelectorAll('span').forEach((span,index)=>{
				 span.style.setProperty('--delay',`${index*0.1}s`)
			 })
	</script>
</html>
